<template>
    <div class="add-address">
        <div class="card f14">
            <div class="item same">
                <div class="name">
                    <span class="title">姓名</span>
                    <input class="repeat" type="text" v-model="name">
                </div>
                <div class="phone">
                    <span class="title">电话</span>
                    <input class="repeat" type="tel" maxlength="11" v-model="phone">
                </div>
            </div>
            <div class="city same">
                <span class="title">请选择省市区</span>
                <input class="repeat" type="text" v-model="city">
            </div>
            <div class="detail same">
                <span class="title">详细地址</span>
                <textarea class="repeat" v-model="detail"></textarea>
            </div>
        </div>
        <MyButton title="保存"></MyButton>
    </div>
</template>
<script>
import MyButton from "@/components/Address/Button.vue"
export default {
    name: "AddAddress",
    components: {
        MyButton
    },
    data() {
        return {
            name: "",
            phone: "",
            city: "",
            detail: "",
        }
    }
}
</script>
<style lang="scss" scoped>
.title {
    margin-bottom: 5px;
}

.repeat {
    border: 0;
    outline: 0;
    padding: 10px 5px;
    border-radius: 4px;
    background-color: #efefef;
}

.same {
    padding: 10px 20px;
    border-bottom: 1px solid #efefef;
    width: 375px;
    display: flex;
}

.add-address {
    background-color: #ffffff;
    min-height: 100vh;
    padding-top: 20px;
    padding-bottom: 80px;

    .card {
        .item {
            .name {
                margin-right: 10px;
            }

            .name,
            .phone {
                width: 162.5px;

                input {
                    width: 162.5px;
                }
            }
        }

        .city {
            flex-direction: column;

            input {
                width: 335px;
            }
        }

        .detail {
            flex-direction: column;

            textarea {
                resize: none;
                width: 335px;
            }
        }
    }
}
</style>